<template>
    <div class="calendar-list">
        <div class="list-header">
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
            <span>日</span>
        </div>
        <div class="list-body">
            <span v-for="item in lists"  :key="item.date + item.type" :class="styleObj(item)" @click="handleClick(item)">{{ item.date }}</span>
        </div>
    </div>
</template>

<script setup>
import {computed} from 'vue';
import { useCounterStore } from '@/stores/calendar';
import { storeToRefs } from 'pinia';
//导入数组数据
const { lists,date } = storeToRefs(useCounterStore());
const {lastMonth,nextMonth} = useCounterStore();
//添加样式
const styleObj = computed(()=>{
    return (item) => {
        return{
        off: item.type !=='this',
        active:item.date === date.value && item.type === 'this'
        }
    }
})
//实现点击切换
const handleClick = (item) => { 
    if(item.type === 'last'){
        lastMonth()
    }else if(item.type === 'next'){
        nextMonth()
    }{
        date.value = item.date
    }
}

</script>

<style lang="scss" scoped>
.calendar-list{
    padding: 0 20px;
    // height: 400px;
    background-color: #fff;
    .list-header{
        display: flex;
        gap: 20px;
        span{
            flex: 1;
            padding: 10px 0;
            text-align: center;
            font-size: 14px;
            color: #333;
            cursor: default;
            &:nth-child(6), &:nth-child(7){
                color: #f11;
            }
        }
    }
    .list-body{
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(6, 1fr);
        gap: 20px;
        span{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 9px;
            font-size: 24px;
            font-weight: bold;
            border-radius: 12px;
            cursor: pointer;
            &:nth-child(7n+6), &:nth-child(7n){
                color: #eb3333;
            }
            &.off{
                opacity: 0.3;
            }
            &:hover{
                background: rgba(78, 110, 242, 0.1);
            }
            &.active{
                border: 2px solid #4e6ef2;
            }
        }
    }
}
</style>